<template>
	<view class="msg-page" @click="closeModalOnClickOutside">
		<view class="container card">
			<view class="search-box">
				<SearchCollapse ref="SearchCollapseRef" class="search-box" :form="searchForm" :formNames="formNames"
					@reset="resetForm" @submit="searchConfirm">
					<template v-slot:content="{ currentKey }">
						<view>
							<scroll-view style="height: 100%;" scroll-y="true">
								<view v-if="currentKey == 'archivesName'" class="search-input">
									<u-input v-model="searchForm.archivesName" clearable
										@confirm="confirmInput($event, 'name')" placeholder="请输入案卷名称"/>
								</view>
								<view v-if="currentKey == 'handleType'" class="drop-down-wrap">
									<SelectList :value="searchForm.handleType" @input="changeVal($event, 'handleType')"
										:list="handleTypeList" />
								</view>
								<view v-if="currentKey == 'moduleName'" class="drop-down-wrap">
									<SelectList :value="searchForm.moduleName" @input="changeVal($event, 'moduleName')"
										:list="moduleNameList" />
								</view>
								<view v-if="currentKey == 'searchCreateTime'" @click="showDatePicker">
									<DateRangeInput :value="searchForm.searchCreateTime" />
								</view>
							</scroll-view>
						</view>
					</template>
				</SearchCollapse>
			</view>

			<view class="msg-list" v-if="logList.length">
				<view class="container">
					<scroll-view class="scroll-list" @scrolltolower="loadMoreData" scroll-y="true">
						<view class="uni-list">
							<view class="uni-list-cell" v-for="(item, index) in logList" :key="index">
								<view class="uni-media-list">
									<view class="uni-media-list-info">
										<view class="uni-media-list-icon"
											:style="{ 'background-color': modulesColor(item.dictId) }">
											<text>{{ cardAvatar(item.dictId) || '--' }}</text>
										</view>
										<view class="uni-media-list-text">
											<view class="uni-media-list-text-name">
												<text>{{ item.archivesName || '--' }}</text>
											</view>
											<view class="uni-media-list-text-action">
												<view>
													<text>{{ item.nickName }}</text>
													<text :style="{ 'color': handleTypeMap[item.handleType].color }">{{
														handleTypeMap[item.handleType].text
														|| '--' }}了</text>
													<text>{{ item.moduleName }}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="time">
										<text>{{ item.createTime || '--' }}</text>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="status" />
					</scroll-view>
				</view>
			</view>
			<u-empty v-else text="暂无消息" :icon-size="200" mode="list"></u-empty>
		</view>
		<u-calendar v-model="dateTimePickerShow" mode="range" @change="onDateConfirm"></u-calendar>
	</view>
</template>
<script>
import SearchCollapse from '@/components/search-collapse/search-collapse.vue'
import SelectList from '@/components/select-list/select-list.vue'
import DateRangeInput from '@/components/date-range-input/date-range-input.vue'
import {
	mapModulesColor,
	mapModulesTextAvatar
} from '@/const'
import { HANDLE_TYPE, handleTypeMap, } from '@/const/archives';
import { convertToLabelValueList } from '@/const/utils'
import { MODULE_DICTID, MODULE_DICTID_NAMES } from '@/const/modules'
export default {
	components: { SearchCollapse, SelectList, DateRangeInput },
	data() {
		return {
			handleTypeMap,
			status: 'loadmore',
			keywords: '',
			logList: [],
			oldLogList: [],
			pageNum: 1,
			pageSize: 10,
			searchForm: {
				archivesName: null,
				handleType: null,
				moduleName: null,
				searchCreateTime: null
			},
			formNames: {
				archivesName: '案卷名称',
				handleType: '操作类型',
				moduleName: '证据链类型',
				searchCreateTime: '操作时间',
			},
			dateTimePickerShow: false
		};
	},
	computed: {
		handleTypeList() {
			let HANDLE_TYPE_NAMES = {}
			Object.keys(handleTypeMap).forEach(key => {
				HANDLE_TYPE_NAMES[key] = handleTypeMap[key].text;
			})
			return convertToLabelValueList(HANDLE_TYPE, HANDLE_TYPE_NAMES)
		},
		moduleNameList() {
			return convertToLabelValueList(MODULE_DICTID, MODULE_DICTID_NAMES)
		},
		cardAvatar() {
			return (value) => {
				return mapModulesTextAvatar[value]
			}
		},
		modulesColor() {
			return (val) => {
				return mapModulesColor[val]
			}
		},
	},
	onLoad(params) {
		uni.hideTabBar()
		this.searchForm.archivesName = params.archivesName
		this.pageNum = 1
		if (this.vuex_config.isConnected) {
			this.getLogList(this.searchForm)
		}
	},
	onNavigationBarButtonTap(e) {
		uni.navigateBack()
	},
	methods: {
		closeModalOnClickOutside(e) {
			if (this.$refs.SearchCollapseRef.collapseBodyShow) {
				this.$refs.SearchCollapseRef.collapseBodyShow = false
			}
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		getLogList(params) {
			const sendParamsfilteredObj = {};

			Object.keys(params).forEach((key) => {
				if (params[key] !== null && params[key] !== undefined) {
					sendParamsfilteredObj[key] = params[key];
				}
			});
			this.$u.api.archives.logList({
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				...sendParamsfilteredObj
			}).then(res => {
				console.log(res);
				if (res.code == 200) {
					// this.logList = res.rows
					if (res.total <= this.pageSize) {
						this.status = 'nomore'
					}

					if (this.pageNum == 1) {
						this.logList = res.rows
						this.oldLogList = res.rows
					} else {
						if (res.rows.length > 0) {
							res.rows.forEach(log => {
								this.logList.push(log)
								this.oldLogList.push(log)
							})

							this.status = 'loadmore'
						} else {
							// 返回数据为空 更改状态 没有更多数据
							this.status = 'nomore'
						}
					}
				}
			})
		},
		loadMoreData() {
			// 更改状态
			if (this.status == 'nomore') return
			this.status = 'loading'
			// 更改加载页数
			this.pageNum++
			// 数据请求
			this.getLogList(this.searchForm)

		},
		searchConfirm() {
			this.pageNum = 1
			this.getLogList(this.searchForm)
		},
		selectConfirm(e, key) {
			let {
				value,
				label
			} = e[0];
			this.searchForm[key] = value;
			this.searchForm[key + 'Text'] = label;
			this.searchConfirm()
		},
		resetForm() {
			this.status = 'loadmore'
			this.searchForm = this.$options.data().searchForm
			this.searchConfirm()
		},
		confirmInput(val, key) {
			this.searchForm[key] == val
			this.searchConfirm(this.searchForm)
		},
		changeVal(val, key) {
			this.searchForm[key] = this.searchForm[key] === val ? null : val
			this.searchConfirm(this.searchForm)
		},
		showDatePicker() {
			this.dateTimePickerShow = true
		},
		onDateConfirm(dateOParams) {
			const { startDate, endDate } = dateOParams
			this.dateTimePickerShow = false
			this.searchForm.searchCreateTime = [startDate, endDate]
		},
	}
};
</script>
<style lang="scss" scoped>
.scroll-list {
	height: 100%;

}

.msg-page {
	padding: 32rpx 34rpx;

	.msg-list {
		padding: 0 30rpx;

		height: calc(100vh - 32px - 100px);
		/* #ifdef H5 */
		height: calc(100vh - 64rpx - 44px - 40px);

		/* #endif  */
		.container {
			height: 100%;
			border-top: 2rpx solid $u-border-color;

			.uni-list {
				margin-bottom: 20rpx;

				.uni-media-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0;
					border-bottom: 2rpx solid $u-border-color;

					&-info {
						display: flex;

						.uni-media-list-icon {
							width: 72rpx;
							height: 72rpx;
							border-radius: 16rpx;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.uni-media-list-text {
							padding-left: 16rpx;

							&-name {
								font-size: 32rpx;
								font-weight: bold;
								color: $u-content-color;
							}

							&-action {
								font-size: 28rpx;

								text:nth-of-type(2) {
									margin: 0 10rpx;
								}
							}
						}
					}

					.time {
						font-size: 28rpx;
						color: #999;
					}
				}

			}
		}
	}

}

.search-box {
	padding: 10rpx 0 4rpx;

	.search-input {
		background-color: #fff;
		width: 100%;
		padding: 16rpx 34rpx;
		border-radius: 4px;
		font-size: 28rpx;
	}
}
</style>